<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>凡客-会员中心-我的订单</title>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/Home/org/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
		<script src="{{__PUBLIC__}}/Home/js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="{{__PUBLIC__}}/Home/org/bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/Home/css/address.css" />

		<!-- 城市联动 -->
		<script type="text/javascript" src="{{__PUBLIC__}}/Home/js/area.js"></script>
		<script type="text/javascript">
			$(function(){
				// 初始化方法
				area.init('area');
				area.selected('北京市','北京','东城区');
			})
		</script>

		<!-- 弹窗插件 -->
		<script src="{{__PUBLIC__}}/Home/js/qikoo.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/Home/css/qikoo.css" />
	</head>

	<body>
		{{include file="VIEW_PATH/Common/header.php"}}
		<!--主体部分-->

		<div id="position">
			您当前的位置：<a href="{{U('Index/index')}}">凡客首页</a> > <a href="{{U('index')}}">我的凡客</a> > <a href="javascript:;">收货地址</a>
		</div>
		<div id="welcome">
			<div id="side-nav">
				<h2><a href="{{U('index')}}">我的凡客</a></h2>
				<ul>
					<li>
						<h3>订单中心</h3>
					</li>
					<li>
						<a href="{{U('dingdan')}}">·我的订单</a>
					</li>

				</ul>
				<ul>
					<li>
						<h3>客户服务</h3>
					</li>
					<li>
						<a href="{{U('tui')}}">·退换货办理</a>
					</li>

				</ul>
				<ul>
					<li>
						<h3>账户管理</h3>
					</li>
					<li>
						<a href="{{U('record')}}">·账户记录</a>
					</li>
					<li class="index">
						<a href="javascript:;">·收货地址</a>
					</li>
					<li>
						<a href="{{U('safe')}}">·修改密码</a>
					</li>
					<li>
						<a href="{{U('ziliao')}}">·我的资料</a>
					</li>

				</ul>
			</div>

			<!--内容部分-->
			<!--右侧区域-->
			<!-- 判断默认地址 -->
			<script type="text/javascript">
				$(function(){
					$.each($('.nr_tab input[name=is_def]'), function(k, v) {
						var def = $(this).val();
						if(def==1){
							$(this).parents('tr').addClass('tab_sel').siblings('tr').removeClass('tab_sel');
							$(this).parents('td').find('div').html('<p class="moRen">默认地址</p><a href="javascript:;" class="add_edit">编辑</a>')
						}
					});
					// 编辑默认地址
					$('.moRen').live('click', function() {
						var _this = $(this);
						// 判断是否选中
						var def = $(this).parents('td').find('span input[name=is_def]').val();
						if(def==1){
							return;
						};
	
						// 获得对应的地址adid
						var adid = $(this).parents('td').find('p input[name=adid]').val();
						// alert(adid);
						// 异步发送
						$.ajax({
							url: '{{U('ajaxMo')}}',
							type: 'POST',
							dataType: 'json',
							data: {adid: adid},
							success:function(data){
								if(data.status){
									// 恢复默认
									$('tr.tab_sel').find('span input[name=is_def]').val(0);
									$('tr.tab_sel td.index').find('div').html('<a class="moRen" href="javascript:;">设为默认</a><a href="javascript:;" class="add_edit">编辑</a><a href="javascript:;" class="add_del">删除</a>');
									// 再设置默认
									_this.parents('tr').addClass('tab_sel').siblings('tr').removeClass('tab_sel');
									_this.parents('td.index').find('span input[name=is_def]').val(1);
									_this.parents('td.index').find('div').html('<p class="moRen">默认地址</p><a href="javascript:;" class="add_edit">编辑</a>');
								}
							}
						})
					});
				})
			</script>
			<div class="nR_r">
				<div class="nR_r_1">
					<h3>
					<span>收货地址</span>
				</h3>
					<div class="nR_r_2">
						<table class="nr_tab" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<th width="86">收货人</th>
								<th>详细地址 </th>
								<th width="108">电话/手机</th>
								<th width="106">操作 </th>
							</tr>
							{{foreach from="$address" key="$k" value="$v"}}
							<tr>
								<td>{{$v['consignee']}}</td>
								<td>{{$v['district']}} {{$v['detail']}},{{$v['postcode']}}</td>
								<td>{{$v['tel']}}</td>
								<td class="index">
									<div>
										<a class="moRen" href="javascript:;">设为默认</a>
										<a href="javascript:;" class="add_edit">编辑</a><a href="javascript:;" class="add_del">删除</a>
									</div>
									<span><input type="hidden" name="is_def" value="{{$v['is_def']}}" /></span>
									<p>
										<input type="hidden" name="adid" value="{{$v['adid']}}" />
									</p>
								</td>
							</tr>
							{{endforeach}}
						</table>

						<!-- 单击显示添加地址框 -->
						<script type="text/javascript">
							$(function(){
								$('.addshow').toggle(function() {
									$(this).addClass('index');
									$('.city').css('display', 'block');
								}, function() {
									$(this).removeClass('index');
									$('.city').css('display', 'none');
								});
							})
						</script>

						<!-- 提示框显隐 -->
						<script type="text/javascript">
							$(function(){
								$('.city li input').blur(function() {
									if($(this).val().length==0){
										$(this).parents('li').find('.adhide').css('display', 'block');
									}else{
										$(this).parents('li').find('.adhide').css('display', 'none');
									}
								});
								$('.city li select').blur(function() {
									if($(this).val()==0){
										$(this).parents('li').find('.adhide').css('display', 'block');
									}else{
										$(this).parents('li').find('.adhide').css('display', 'none');
									}
								});
							})
						</script>

						<!-- 添加新地址异步 -->
						<script type="text/javascript">
							$(function(){
								$('#add').submit(function() {
									var x = 1;
									// 判断是否填写内容
									$.each($('.city li input'), function(k, v) {
										if($(this).val().length==0){
											$(this).parents('li').find('.adhide').css('display', 'block');
											x = 0;
										}
									});
									if(x == 0) return false;
									var data = $('#add').serialize();
									// 异步发送
									$.ajax({
										url: '{{U('ajaxAddress')}}',
										type: 'POST',
										dataType: 'json',
										data: data,
										success:function(data){
											// console.log(data);
											if(data.is_def==0){
												var tr = '<tr><td>'+data.consignee+'</td><td>'+data.district+' '+data.detail+','+data.postcode+'</td><td>'+data.tel+'</td><td class="index"><div><a class="moRen" href="javascript:;">设为默认</a><a href="javascript:;" class="add_edit">编辑</a><a href="javascript:;" class="add_del">删除</a></div><span><input type="hidden" name="is_def" value="'+data.is_def+'" /></span><p><input type="hidden" name="adid" value="'+data.adid+'" /></p></td></tr>';
												$('table.nr_tab').append(tr);
											}else{
												// 恢复默认
												$('tr.tab_sel').find('span input[name=is_def]').val(0);
												$('tr.tab_sel td.index').find('div').html('<a class="moRen" href="javascript:;">设为默认</a><a href="javascript:;" class="add_edit">编辑</a><a href="javascript:;" class="add_del">删除</a>');
												$('tr.tab_sel').removeClass('tab_sel');
												// 添加
												var tr = '<tr class="tab_sel"><td>'+data.consignee+'</td><td>'+data.district+' '+data.detail+','+data.postcode+'</td><td>'+data.tel+'</td><td class="index"><div><p class="moRen">默认地址</p><a href="javascript:;" class="add_edit">编辑</a></div><span><input type="hidden" name="is_def" value="'+data.is_def+'" /></span><p><input type="hidden" name="adid" value="'+data.adid+'" /></p></td></tr>';
												$('table.nr_tab').find('tr').eq(0).after(tr);
											}
											// 添加框隐藏  重置表单
											$('#add')[0].reset();
											$('.addshow').removeClass('index');
											$('.city').css('display', 'none');
										}
									})
									
									return false;
								});
							})
						</script>

						<!-- 删除地址异步 -->
						<script type="text/javascript">
							$(function(){
								$('.add_del').live('click', function() {
									var _this = $(this).parents('tr');
									var adid = _this.find('input[name=adid]').val();
									qikoo.dialog.confirm('确定要删除此地址吗？',function(){
										// alert(adid);
										$.ajax({
											url: '{{U('ajaxAddDel')}}',
											type: 'POST',
											dataType: 'json',
											data: {adid: adid},
											success:function(data){
												if(data.status){
													// qikoo.dialog.alert(data.message);
													_this.remove();
												} 
											}
										})
								    });
								});
							})
						</script>

						<!-- 添加新地址 -->
						<form action="" method="post" id="add">
							<div class="tianJia">
								<a class="addshow">添加新地址</a>
								<div class="city">
									<ul>
										<li>
											<p class="title"><span>*</span> 收&nbsp;&nbsp;货&nbsp;&nbsp;人：</p>
											<input type="text" name="consignee" placeholder="请准确填写真实姓名" class="consignee" />
											<div class="white"></div>
											<div class="adhide"><span></span>
												<p>请准确填写真实姓名 </p>
											</div>
										</li>
										<li>
											<p class="title"><span>*</span> 地　　区：</p>
											<select name="district[]" id="area1"></select>
											<select name="district[]" id="area2"></select>
											<select name="district[]" id="area3"></select>
											<div class="white"></div>
											<div class="adhide"><span></span>
												<p>请选择省份 </p>
											</div>
										</li>
										<li>
											<p class="title"><span>*</span> 详细地址：</p>
											<input type="text" name="detail" placeholder="请填写详细路名及门牌号" class="detail" />
											<em> 配送范围与配送时间 </em>
											<div class="white"></div>
											<div class="adhide"><span></span>
												<p>请填写详细路名及门牌号 </p>
											</div>
										</li>
										<li>
											<p class="title"><span>*</span> 邮政编码：</p>
											<input type="text" name="postcode" placeholder="请填写正确的邮政编码" class="postcode" />
											<div class="white"></div>
											<div class="adhide"><span></span>
												<p>请填写正确的邮政编码 </p>
											</div>
										</li>
										<li>
											<p class="title"><span>*</span> 手　　机：</p>
											<input type="text" name="tel" placeholder="请填写正确的手机号码" class="tel" />
											<div class="white"></div>
											<div class="adhide"><span></span>
												<p>请填写正确的手机号码 </p>
											</div>
										</li>
									</ul>
									<p class="def">
										<input type="checkbox" name="is_def" id="" value="1" />设置为默认收货地址</p>
									<input type="submit" value="" class="tijiao">
								</div>
							</div>
						</form>

					</div>
				</div>
			</div>
			<!--右侧区域结束-->

		</div>
		<!-- 编辑地址框 -->
		<script type="text/javascript">
			$(function(){
				var x = 0;
				$('.add_edit').live('click', function() {
					x = $(this).parents('tr').index();
					// alert(x);
					$( '<div id="city"></div>' ).css( {
						width : $(document).width(),
	 					height : $(document).height(),
	 					position : 'absolute',
	 					top : 0,
	 					left : 0,
	 					zIndex : 998,
	 					opacity : 0.3,
	 					filter : 'Alpha(Opacity = 30)',
	 					backgroundColor : '#000000'
					} ).appendTo( 'body' );
					// 模态框显示
					var obj = $( '.city_edit' );
					obj.css( {
						left : ( $( window ).width() - obj.width() ) / 2,
						top : ( $( window ).height() - obj.height() ) * 1 / 3
					} ).fadeIn();

					var adid = $(this).parents('tr').find('input[name=adid]').val();
					// alert(adid);
					// 异步拉取数据
					$.ajax({
						url: '{{U('ajaxEdit')}}',
						type: 'POST',
						dataType: 'json',
						data: {adid:adid},
						success:function(data){
							$('.city_edit input[name=consignee]').val(data.consignee);
							$('.city_edit input[name=detail]').val(data.detail);
							$('.city_edit input[name=postcode]').val(data.postcode);
							$('.city_edit input[name=tel]').val(data.tel);

							$('.city_edit li.hide').html('<input type="hidden" name="adid" value="'+data.adid+'"><input type="hidden" name="is_def" value="'+data.is_def+'">');
							// 初始化
							area.init("areas");
							area.selected(data.district[0],data.district[1],data.district[2]);
						}
					})
					// 返回页面
					$('.adclose,.quxiao').click(function(){
						$('.city_edit').fadeOut('slow',function(){
							$('#city').remove();
						});
						return false;
					} );
				});

				// <!-- 编辑异步 -->
				$('#form_edit').submit(function() {
					// alert(x);
					var y = 1;
					// 判断是否填写内容
					$.each($('.city_edit li input'), function(k, v) {
						if($(this).val().length==0){
							$(this).parents('li').find('.adhide').css('display', 'block');
							y = 0;
						}
					});
					if(y == 0) return false;
					
					// alert(1);
					var data=$('#form_edit').serialize();
					$.ajax({
						url: '{{U('ajaxTj')}}',
						type: 'POST',
						dataType: 'json',
						data: data,
						success:function(data){
							// 弹框隐藏
							$('.city_edit').fadeOut('slow', function(){
								$('#city').remove();
							});
							$('#form_edit')[0].reset();

							$('#main .address .add').remove();
							
							// 添加进页面
							if(data.is_def==0){
								var tr = '<td>'+data.consignee+'</td><td>'+data.district+' '+data.detail+','+data.postcode+'</td><td>'+data.tel+'</td><td class="index"><div><a class="moRen" href="javascript:;">设为默认</a><a href="javascript:;" class="add_edit">编辑</a><a href="javascript:;" class="add_del">删除</a></div><span><input type="hidden" name="is_def" value="'+data.is_def+'" /></span><p><input type="hidden" name="adid" value="'+data.adid+'" /></p></td>';
								$('table.nr_tab tr').eq(x).html(tr);
							}else{
								var tr = '<td>'+data.consignee+'</td><td>'+data.district+' '+data.detail+','+data.postcode+'</td><td>'+data.tel+'</td><td class="index"><div><p class="moRen">默认地址</p><a href="javascript:;" class="add_edit">编辑</a></div><span><input type="hidden" name="is_def" value="'+data.is_def+'" /></span><p><input type="hidden" name="adid" value="'+data.adid+'" /></p></td>';
								$('table.nr_tab tr').eq(x).html(tr);
							}
							
						}
					})
					return false;
				});
			})
		</script>

		<!-- 编辑地址 -->
		<form action="" id="form_edit">
			<div class="city_edit">
				<h3>编辑地址</h3>
				<ul>
					<li>
						<p class="title"><span>*</span> 收&nbsp;&nbsp;货&nbsp;&nbsp;人：</p>
						<input type="text" name="consignee" placeholder="请准确填写真实姓名" class="consignee" />
						<div class="white"></div>
						<div class="adhide"><span></span>
							<p>请准确填写真实姓名 </p>
						</div>
					</li>
					<li>
						<p class="title"><span>*</span> 地　　区：</p>
						<select name="district[]" id="areas1"></select>
						<select name="district[]" id="areas2"></select>
						<select name="district[]" id="areas3"></select>
						<div class="white"></div>
						<div class="adhide"><span></span>
							<p>请选择省份 </p>
						</div>
					</li>
					<li>
						<p class="title"><span>*</span> 详细地址：</p>
						<input type="text" name="detail" placeholder="请填写详细路名及门牌号" class="detail" />
						<em> 配送范围与配送时间 </em>
						<div class="white"></div>
						<div class="adhide"><span></span>
							<p>请填写详细路名及门牌号 </p>
						</div>
					</li>
					<li>
						<p class="title"><span>*</span> 邮政编码：</p>
						<input type="text" name="postcode" placeholder="请填写正确的邮政编码" class="postcode" />
						<div class="white"></div>
						<div class="adhide"><span></span>
							<p>请填写正确的邮政编码 </p>
						</div>
					</li>
					<li>
						<p class="title"><span>*</span> 手　　机：</p>
						<input type="text" name="tel" placeholder="请填写正确的手机号码" class="tel" />
						<div class="white"></div>
						<div class="adhide"><span></span>
							<p>请填写正确的手机号码 </p>
						</div>
					</li>
					<li class="hide"></li>
				</ul>
				<a href="" class="adclose">X</a>
				<input type="submit" value="保存地址" class="tijiao">
				<a href="javascript:;" class="quxiao">取消编辑</a>
			</div>
			<div class="js"></div>
		</form>
		{{include file="VIEW_PATH/Common/footer.php"}}

	</body>

</html>